import React, { useEffect } from "react";

import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import { connect } from "react-redux";
// import Home from "./views/home";
// import Main from "./views/main";
// import Login from "./views/login";
// import Bill from "./views/bill";
// import Register from "./views/register";
import "echarts-wordcloud";
import "assets/less/index.less";
import { isLogin } from "utils/api/userApi";
import { checkIsLogin, setUserData } from "stores/homeStore/action";
import Loadable from './components/loadable'

/*
 ** 注册主题
 */
import echarts from "echarts";
import waldenTheme from "./assets/theme/walden";
import macaronsTheme from "./assets/theme/macarons";
import shineTheme from "./assets/theme/shine";
import china from "./assets/theme/china";
echarts.registerTheme("walden", waldenTheme);
echarts.registerTheme("macarons", macaronsTheme);
echarts.registerTheme("shine", shineTheme);
echarts.registerMap('china', china);

// 加载页面
const Home = Loadable({
  loader: () => import("./views/home")
})
const Main = Loadable({
  loader: () => import("./views/main")
})
const Login = Loadable({
  loader: () => import("./views/login")
})
const Bill = Loadable({
  loader: () => import("./views/bill")
})
const Register = Loadable({
  loader: () => import("./views/register")
})

function App(props) {
  const { checkIsLogin, setUserData } = props;
  useEffect(() => {
    isLogin()
      .then(res => {
        const { err, data } = res;
        if (err !== 0) {
          checkIsLogin(false, true);
        } else {
          setUserData(data);
          checkIsLogin(true, true);
        }
      })
      .catch(err => {
        console.error(err);
      });
  }, [checkIsLogin, setUserData]);

  return (
    <div className="App">
      <HashRouter>
        <TransitionGroup>
          <CSSTransition appear={true} classNames="appAppear" timeout={500}>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/login" component={Login} />
              <Route path="/register" component={Register} />
              <Route path="/main" component={Main} />
              <Route path="/bill" component={Bill} />
              <Redirect to="/" />
            </Switch>
          </CSSTransition>
        </TransitionGroup>
      </HashRouter>
    </div>
  );
}

export default connect(
  store => ({
    isRender: store.home.isRender
  }),
  {
    checkIsLogin,
    setUserData
  }
)(App);
